<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity3">

<head>
    <title></title>
    <script type="text/javascript" src="/pageoffice.js"></script>
    <script type="text/javascript">
        function ConvertFile() {
            document.getElementById("Button1").disabled = true;

            //设置保存方法
            filemakerctrl.SaveFilePage="/FileMakerModify/save";
            filemakerctrl.CallFileMaker({
                url: "/FileMakerModify/FileMakerModify",
                success: function (res) {//res:获取服务器端fs.setCustomSaveResult设置的保存结果
                    console.log(res);
                    console.log("completed successfully.");
                    setProgress(100);
                },
                progress: function (pos) {
                    console.log("running "+pos+"%");
                    setProgress(pos);
                },
                error: function (msg) {
                    console.log("error occurred: "+msg);
                }
            });
        }

        function setProgress(percent) {
            var progressBar = document.getElementById("progressBar");
            progressBar.style.width = percent + '%';
            progressBar.innerText = percent + '%';
        }
    </script>
    <style>
        #progressBarContainer {
            width: 500px;
            background-color: #e0e0e0;
            border-radius: 5px;
            padding: 3px;
            margin: 10px auto;
        }

        #progressBar {
            height: 20px;
            width: 0%;
            background-color: #76b900;
            border-radius: 5px;
            text-align: center;
            line-height: 20px; /* 使文字垂直居中 */
            color: white;
        }
    </style>
</head>
<body>
    <div style="text-align: center;">
        <h3 style="margin:20px;">演示：在不打开文件的情况下用程序修改文档指定区域内容</h3>
        <div style="width:680px;margin: 0 auto; font-size:14px;">
            <p style="text-align: left;">
                演示内容：<br/>
                &nbsp;&nbsp;&nbsp;&nbsp;本示例展示了如何利用FileMaker对象，在无需显示打开文件界面的情况下，修改Word文档中指定区域的内容，并自动将修改后的文件保存到服务器上。
            </p>
            <p style="text-align: left;">
                操作说明：<br/>
                &nbsp;&nbsp;&nbsp;&nbsp;1. 点击“修改日期”按钮，执行后台程序把证书文件“maker.doc”中的日期改为今天：<span id="today"></span>。<br/>
                &nbsp;&nbsp;&nbsp;&nbsp;2. 程序执行完毕后，即可在“static/doc/FileMakerModify”目录下查看maker.doc文件修改后的效果。
            </p>
        </div>
        <input id="Button1" type="button" value="修改日期" onclick="ConvertFile()"/>
        <div id="progressBarContainer">
            <div id="progressBar"></div>
        </div>
    </div>
    <script>
        function getFormattedDate() {
            var today = new Date();
            var year = today.getFullYear();
            var month = today.getMonth() + 1; // 月份是从0开始的
            var day = today.getDate();

            // 确保月份和日期是两位数
            month = month < 10 ? '0' + month : month;
            day = day < 10 ? '0' + day : day;

            return year + '-' + month + '-' + day;
        }
        document.getElementById('today').innerText = getFormattedDate();
    </script>

</body>

</html>
